<template>
	<div class="app-content">
		<div class="app-top app-confirm-outline padding-20">
			<div class="vi-view-title">最终大纲</div>
			<div class="buttons margin-t-20">
				<el-button type="primary" plain @click="replaceText(1)">替换</el-button>
				<el-button type="primary" plain @click="replaceText(2)">扩写</el-button>
				<el-button type="primary" plain @click="replaceText(3)">缩写</el-button>
				<el-button type="primary" plain @click="addText()">插入行</el-button>
				<el-button type="primary" plain @click="deleteText()">删除行</el-button>
				<el-button type="primary" @click="goNext">生成文章</el-button>
			</div>
		</div>
		<div class="app-main has-confirm-outline padding-20">
			<div class="app-main--editor-wang">
<!--				<cl-editor-wang ref="editorWangRef" v-model="outlineValue" />-->
				<div class="confirm-outline--select-article position--relative">
					<div class="select-article-title vi-view-title">
						{{ outlineList.theme }}
					</div>
					<div class="select-article-content center-position">
						<div class="select-article-view" v-for="(content,index) in outlineList.content">
							<edit-div
								class="select-article-content-view"
								ref="editDivTitleRef"
								:contenteditable="outlineEdit"
								v-bind:content="content.section"
								@update:content="content.section = $event"
								@click="replaceEvent($event,{content:content.section,type:'title',index:index,titleIndex:index})">
							></edit-div>
							<div class="select-article-content-view--subsection-parent">
								<edit-div
									class="select-article-content-view select-article-content-view--subsection"
									ref="editDivTextRef"
									:contenteditable="outlineEdit"
									v-for="(subsection, xindex) in content.subsections"
									v-bind:content="subsection"
									@update:content="content.subsections[xindex] = $event"
									@click="replaceEvent($event,{content:subsection,type:'text',index:getTextIndex(index+'_'+xindex),titleIndex:index,textIndex:xindex})"
								></edit-div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<el-dialog v-model="replaceModal.visible" @close="closeReplaceModal" width="1200">
		<div class="editor-modal" v-loading="replaceModal.loading">
			<div class="editor-view">
				<edit-div
					class="editor-content"
					:contenteditable="true"
					:content="replaceModal.text"
					@update:content="replaceModal.text = $event"
				></edit-div>
			</div>
			<div class="buttons float--right">
				<el-button type="primary" plain @click="closeReplaceModal">取消</el-button>
				<el-button type="primary" @click="replaceActive">确认</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts" name="work-planning-confirm-outline">
import { onMounted, reactive, ref } from "vue";
import { router, service,storage } from "/@/cool";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { config } from "/@/utils/global";
import { wholeToParse } from "/@/utils/tools";
import EditDiv from "/@/components/EditDiv.vue";
import {merge} from "lodash-es";
let route = useRoute();
let outlineEdit = ref(true);
//获取大纲
let outlineList=<any>reactive({theme:"",content:[]})
const getOutlineList=()=>{
	let query:any=routeQuery?.value.theme || "";
	let dagang:any=routeQuery?.value.content || '';
	outlineList.theme = query;
	outlineList.content=wholeToParse(dagang);
}
//获取选中元素
const replaceElement = ref<any>(null);
const bindValue = ref<any>(null)
const destroyReplace=()=>{
	if(replaceElement.value){
		replaceElement.value.offsetParent.classList.remove("active");
	}
	replaceElement.value=null;
	bindValue.value=null;
}
const replaceEvent = (event:any,bind:any)=>{
	destroyReplace();
	replaceElement.value=event.target;
	replaceElement.value.offsetParent.classList.add("active");
	bindValue.value=bind;
}
//选中内容
const requestRequest=async (type:any,text:string)=>{
	switch(type){
		case 1:
			replaceModal.replaceParams.inputs={content:text};
			return service.base.open.replace(replaceModal.replaceParams);
		case 2:
			replaceModal.replaceParams.inputs={content:text};
			return service.base.open.expand(replaceModal.replaceParams);
		case 3:
			replaceModal.replaceParams.inputs={query:text};
			return service.base.open.abbreviation(replaceModal.replaceParams)
	}
}
//替换 1,扩写:2,缩写3
const replaceText=async (type:any)=>{
	if(!replaceElement.value){
		ElMessage({
			message: "请选择一段内容",
			type: 'warning',
		})
		return;
	}
	let text = replaceElement.value.value;
	openReplaceModal();replaceModal.loading=true;
	let values = await requestRequest(type,text).catch((error)=>{
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		replaceModal.loading=false;
		return;
	}).finally(()=>{
		replaceModal.loading=false;
	});
	let value = wholeToParse(values);
	if(type == 3){
		replaceModal.text = value?.answer || "";
	}else{
		replaceModal.text = value?.data?.outputs?.text || "";
	}
}
//修改内容
let editDivTitleRef= ref();
let editDivTextRef = ref();
const getTextIndex = (index:string) =>{
	let values = <any>[];
	outlineList.content.forEach((item,index)=>{
		item.subsections.forEach((itemX,indexX)=>{
           values.push(index+"_"+indexX);
		})
	})
	return values.indexOf(index);
}
const replaceActive = () => {
	if(bindValue.value.type == "title"){
		editDivTitleRef.value[bindValue.value.index].updateEvent(replaceModal.text);
	}else if(bindValue.value.type == "text"){
		editDivTextRef.value[bindValue.value.index].updateEvent(replaceModal.text)
	}
	closeReplaceModal();
}
//插入行
const addText=()=>{
	if(!bindValue.value?.type){return;}
	if(bindValue.value.type == "title"){
		outlineList.content.splice(bindValue.value.titleIndex+1,0,{section:"一级标题",subsections:["二级标题"]})
	}else if(bindValue.value.type == "text"){
		outlineList.content[bindValue.value.titleIndex].subsections.splice(bindValue.value.textIndex+1,0,"二级标题")
	}
}
//删除行
const deleteText = () => {
	if(!bindValue.value?.type){return;}
	if(bindValue.value.type == "title"){
		outlineList.content.splice(bindValue.value.titleIndex,1)
	}else if(bindValue.value.type == "text"){
		outlineList.content[bindValue.value.titleIndex].subsections.splice(bindValue.value.textIndex,1)
	}
	destroyReplace();
}
//获取某个替换弹出层
const replaceModal=reactive({
	visible:false,
	loading:false,
	replaceParams:{
		"inputs": {},
		...config.AI_PARAMS
	},
	text:<any>"",
})
const openReplaceModal=()=>{
	replaceModal.visible = true;
}
const closeReplaceModal=()=>{
	replaceModal.visible = false;
	destroyReplace();
}
let routeQuery:any = ref(null);
onMounted(()=>{
	routeQuery.value = route.query;
	routeQuery.value.content = storage.get("outline") || "";
	outlineEdit.value=true;
	getOutlineList();
})
const goNext=async () =>{
	outlineEdit.value=false;
	storage.set("outline",outlineList.content)
	let query:any={theme:outlineList.theme};
    await router.push({query:merge({},query)})
	router.push({
		path:"/work/planning/final-outline",
		query:query
	})
}
</script>

<style scoped lang="scss">
.has-confirm-outline {
	top: 104px;
}
.confirm-outline {
	&--select-article {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20px;
		.select-article-content {
			width: 80%;
			min-width: 340px;
			max-height: calc(100% - 200px);
			overflow: hidden;
			overflow-y: auto;
		}
		.select-article-content-title,
		.select-article-content-view {
			width: 100%;
			font-weight: 700;
			color: #000000;
			font-size: 20px;
			line-height: 24px;
			margin-top: 10px;
			margin-bottom: 10px;
			cursor: pointer;
			padding: 10px;
			word-break: break-all;
			box-sizing: border-box;
			&.active{
				color: var(--el-color-primary);
			}
			&--subsection-parent{
				width: 100%;
				font-size: 16px;
				padding-left: 2em;
				box-sizing: border-box;
			}
			&--subsection {
				font-size: 16px;
				line-height: 20px;
				margin-top: 0px;
				margin-bottom: 0px;
				color: #333333;
			}
		}
		.select-article-footer {
			bottom: 40px;
		}
	}
}
.confirm-outline--select-articles {
	.el-radio-group {
		display: flex;
		height: 100%;
	}
	.confirm-outline--select-article + .confirm-outline--select-article {
		border-left: 1px solid #dedede;
	}
}
</style>
